import 'package:cbec_app/components/base/base_image.dart';
import 'package:cbec_app/components/base/base_interactive.dart';
import 'package:cbec_app/components/common/common_style.dart';
import 'package:cbec_app/utils/Tools.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:wechat_assets_picker/wechat_assets_picker.dart';
import 'package:wechat_camera_picker/wechat_camera_picker.dart';


class BaseImageUploadsController extends GetxController{
  
  List<AssetEntity>? imageList = [];
  List<String>? imageUrlList = [];

  @override
  void onInit() {
    super.onInit();
  }  

  //上传图片或视频
  Future<void> upload(context) async {
    final AssetEntity? entity = await CameraPicker.pickFromCamera(context);
    imageList!.add(entity!);
    update();
    Get.back();
  }

}


//图片视频上传组件
class BaseImageUploads extends StatelessWidget {
  

  const BaseImageUploads({super.key});


  @override
  Widget build(BuildContext context) {
    return GetBuilder<BaseImageUploadsController>(
      init: BaseImageUploadsController(),
      builder: (controller){
      return Container(
      child:  Wrap(
              spacing: 5.w,
              runSpacing: 5.w,
              children: [
                for(var item in controller.imageList!)
                      ImageItem(item: item),
                      controller.imageList!.length <9 ? cameraButton(context):const SizedBox()
              ],
            ),
    );
    });
  }

   Widget cameraButton(context) {
    return GetBuilder<BaseImageUploadsController>(
      init: BaseImageUploadsController(),
      builder: (controller){
      return BaseInteractive(
      onClick: (){
        showModalBottomSheet(
                  backgroundColor: Colors.transparent,
                  context: context,
                  builder: (BuildContext context) {
                    return Container(
                      padding: EdgeInsets.only(left: 8.w, right: 8.w),
                      height: 180.h,
                      child: Column(
                        children: <Widget>[
                          BaseInteractive(
                              onClick: (){
                                  controller.upload(context);
                              },
                              childWidget: Container(
                                  decoration: const BoxDecoration(
                                      color: Colors.white,
                                      borderRadius: BorderRadius.only(
                                        topLeft: Radius.circular(20.0),
                                        topRight: Radius.circular(20.0),
                                      )),
                                  alignment: Alignment.center,
                                  width: double.infinity,
                                  height: 50.h,
                                  child: Text("拍照",
                                      style: TextStyle(
                                          fontSize: 15,
                                          fontWeight: FontWeight.w700,
                                          color: Tools.fromHex("#4D87FF"))))),
                          BaseInteractive(
                              onClick: () async {
                                if(controller.imageList!.isEmpty){
                                  controller.imageList = await AssetPicker.pickAssets(context);
                                }else{
                                  controller.imageList!.addAll((await AssetPicker.pickAssets(context,pickerConfig: AssetPickerConfig(
                                    maxAssets: 9-controller.imageList!.length
                                  ))) as Iterable<AssetEntity>);
                                }
                                controller.update();
                                Get.back();
                              },
                              childWidget: Container(
                                  decoration: BoxDecoration(
                                    color: Colors.white,
                                    borderRadius: const BorderRadius.only(
                                      bottomLeft: Radius.circular(20.0),
                                      bottomRight: Radius.circular(20.0),
                                    ),
                                    border: Border(
                                      top: BorderSide(
                                        color: Tools.fromHex("#D7D7D7"),
                                        width: 1.0,
                                      ),
                                    ),
                                  ),
                                  alignment: Alignment.center,
                                  width: double.infinity,
                                  height: 50.h,
                                  child: Text("从相册选择",
                                      style: TextStyle(
                                          fontSize: 15,
                                          fontWeight: FontWeight.w700,
                                          color: Tools.fromHex("#4D87FF"))))),
                          BaseInteractive(
                              onClick: () => {Get.back()},
                              childWidget: Container(
                                  decoration: border_radis(Colors.white,
                                      radiusValue: 20),
                                  margin: EdgeInsets.only(top: 10.w),
                                  alignment: Alignment.center,
                                  width: double.infinity,
                                  height: 50.h,
                                  child: Text("取消",
                                      style: TextStyle(
                                          fontSize: 15,
                                          fontWeight: FontWeight.w700,
                                          color: Tools.fromHex("#4D87FF"))))),
                        ],
                      ),
                    );
                  },
                );
      },
      childWidget: Container(
        decoration:
            border_radis(Colors.white, borderColor: Tools.fromHex("#F7F7F7")),
        width: 60.w,
        height: 60.w,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            BaseImage(url: "comment_camera.png", width: 24, height: 24),
            SizedBox(height: 5.h),
            Text("添加视频/图",
                style:
                    setTextStyle(10, FontWeight.w500, Tools.fromHex("#666666")))
          ],
        ),
      ),
    );
    });
  }

}



class ImageItem extends StatelessWidget {
  
  final AssetEntity item;

  ImageItem({
    super.key,  required this.item,
  });

  @override
  Widget build(BuildContext context) {
    return GetBuilder<BaseImageUploadsController>(
      init: BaseImageUploadsController(),
      builder: (controller){
      return Container(
      alignment: Alignment.center,
      width: 60.w,
      height: 60.w,
      child: Stack(
      children: [
        Positioned(
          child: Container(
          color: Colors.grey,
          width: 95.w,
          height: 95.w,
          child: AssetEntityImage(item, width: 55.w,height: 55.w, isOriginal: true),
        )),
        Positioned( 
          top: 0,
          right: 0,
          child: BaseInteractive(
            onClick: () {
              controller.imageList!.removeAt(controller.imageList!.indexOf(item));
              controller.update();
            },
            childWidget: const Icon(Icons.close,color: Colors.white,size: 16),
          )
        )
      ],
    ),
    );
    });
  }
}